<!-- 用户中心 -->
<template>
    <div class=" flex flex-1 h-full w-full ml-[20px] p-[20px] bg-white">
        <div class="w-full flex flex-col items-center border-b border-solid  pb-[20px]">
            <div class=" w-full h-[215px] flex flex-row p-[20px] border-b border-solid border-gray-400">
                <div class="flex flex-row items-center mr-[300px]">
                    <img :src="baseURL + loginClientInfo.custom_photo"
                        class="w-[150px] h-[150px] rounded-full border border-solid border-gray-200 p-[1px]" alt="">
                    <div class=" flex flex-col text-[12px] leading-8 ml-[6px]">
                        <div class="text-[22px]">{{ loginClientInfo.custom_realName }}</div>
                        <div class="text-gray-500">早上好~</div>
                        <div class="text-primary">修改个人信息</div>
                    </div>
                </div>
                <ul class=" flex flex-col leading-[50px] text-[14px] text-gray-500">
                    <li>
                        <div>账号安全：
                            <span class="text-green-600">较高</span>
                        </div>
                    </li>
                    <li>
                        <div>绑定手机：
                            {{ maskTel(loginClientInfo.custom_tel) }}</div>
                    </li>
                    <li>
                        <div>绑定邮箱：
                            {{ maskEmail(loginClientInfo.custom_email) }}</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</template>
<script setup>
import { ref, inject, computed } from "vue";
import { maskTel, maskEmail } from "../../utils/StringUtils";
import { mainStore } from "../../store";

const baseURL = inject("baseURL");
const store = mainStore();
const loginClientInfo = computed(() => store.loginClientInfo);


</script>
<style scoped lang="scss">

</style>
   